<template>
	<view :style="colorStyle">
		<!-- 优惠券弹窗 -->
		<view class='coupon-window' :class='window==true?"on":""'>
			<view class='couponWinList'>
				<image :src="`${imgHost}${couponImage}`" mode="widthFix"></image>
			</view>
			<view class='lid'>
				<view class='iconfont icon-guanbi3' @click="close"></view>
			</view>
		</view>
		<view class='mask' catchtouchmove="true" :hidden="window==false"></view>
	</view>
</template>

<script>
	import colors from "@/mixins/color";
	import {HTTP_REQUEST_URL} from '@/config/app';
	export default {
		props: {
			window: {
				type: Boolean | String | Number,
				default: false,
			},
			couponList: {
				type: Array,
				default: function() {
					return []
				},
			},
			couponImage: {
				type: String,
				default: '',
			},
		},
		mixins: [colors],
		data() {
			return {
				imgHost:HTTP_REQUEST_URL+'/statics/images/'
			};
		},
		methods: {
			close:function(){
			      this.$emit('onColse');
			    }
		}
	}
</script>


<style scoped lang="scss">
	.mask {
		z-index: 9999;
	}

	.coupon-window {
		width: 690rpx;
		height: 350rpx;
		background: var(--view-theme);
		position: fixed;
		top: 20%;
		z-index: 10000;
		left: 50%;
		margin-left: -345rpx;
		transform: translate3d(0, -200%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
		border-radius: 20rpx;
	}

	.coupon-window.on {
		transform: translate3d(0, 0, 0);
	}

	.coupon-window .couponWinList {
		width: 690rpx;
		image{
			width: 690rpx;
			border-radius: 20rpx 20rpx 0 0;
		}
	}

	.coupon-window .lid {
		width: 690rpx;
		height: 200rpx;
		position: fixed;
		left: 50%;
		bottom: 0%;
		margin-left: -345rpx;
	}
	
	.coupon-window .lid .iconfont {
		color: #fff;
		font-size: 60rpx;
		text-align: center;
		margin-top: 110rpx;
	}
</style>
